From Figma component to working Vue code: how I identified, researched, and solved a structural handoff problem.
Role
UX/UI Designer, design system owner
Tools
Figma, Code Connect, Vue, Claude/Gemini
Timeline
Ongoing, 4+ years
100+
Figma components
100+
Vue components
−43 hrs
Time saved
90%+
AI accuracy after
PROBLEM 01
AI generates generic code
Sees a screenshot, not component structure. Builds HTML & CSS from scratch every time, ignoring the existing library entirely.
PROBLEM 02
Component names don't match
Buttons/Blauw/solid vs <Button variant="primary">, no formal link between design and code. AI guesses wrong every time.
PROBLEM 03
Color drift across layers
Figma #00A0D1 · Element Plus #138FD7 · Production: manual override. Three different blues across one product.
PROBLEM 04
v2 library incomplete
AI migration from v1 silently missed components. Library not production-ready, a full rebuild as v3 was the only viable path.
DESIGN · ME
Audit v1 vs v2 → decide to rebuild as v3
AI migration missed too many components. Fixing v2 would have taken longer. Decision: skip v2, build v3 from scratch with proper structure.
DESIGN · ME
Build v3: Variables, Text Styles, Components
65 Figma Variables · 13 Text Styles · Buttons from 20+ separate frames into 1 component with variants + properties.
DEV
Vue DevTools
One dev needed to share dev-library access and verify component names, design has no direct visibility into the codebase.
TOGETHER
Build component mapping table
I provide Figma names + variants. Dev translates to Vue props. One shared reference eliminates back-and-forth entirely.
DEV
Publish Code Connect via GitLab CI/CD
Formal bridge between Figma and Vue. Works with GitLab, no GitHub dependency. Dev Mode shows the correct code snippet automatically.
RESULT
AI uses the right components automatically
Claude Code reads Figma via MCP · Dev Mode shows correct Vue snippets · Rework reduced from 1–2 hrs to ~15 min per component.
Option A: Full library alignment — is 100% smooth possible?
Aligning component names between Figma and the Vue codebase theoretically produces the highest AI accuracy (~95%), but 100% is never achievable even with perfect naming.
Figma names describe visual appearance: Buttons/Blauw/solid, where "Blauw" is color and "solid" is the icon style. Vue names describe functional behavior: <Button variant="primary" icon="plus">, where "primary" is a semantic role and the icon style is irrelevant to the component itself. Figma-specific concepts have no direct equivalent in the codebase — they exist only at the design layer.
The dev library also contains complex Element Plus components — el-date-picker, el-select, el-tree — used as black boxes in design. These need Code Connect mappings regardless of naming alignment.
Conclusion: full alignment reduces AI guesswork significantly and is worth pursuing for the most-used components — but it doesn't eliminate Code Connect, it makes Code Connect more accurate. The realistic ceiling for AI-generated code accuracy, even with perfect alignment, is ~95%. The remaining 5% always needs human judgment.
Option B: Skip rename, use Code Connect as bridge → 80–90% AI accuracy
Design-to-Code Alignment Roadmap
Evaluating restructuring efforts against restraint, tooling, and final sync metrics.
STEP 01
The Problem
Design system elements and codebases are structurally out of sync, blocking automation and developers.
STEP 02
The Process
Audit component names, map properties, and establish clean token translation layers.
STEP 03 · STRATEGY DECISION
Alignment Strategy
Option A: Full Rename — ~95% sync. Option B: Code Connect — skip file remapping via config layer, ~80–90% sync.
STEP 04 · VELOCITY IMPACT
Time Investment
Highly dependent on option path. Heavy upfront cost vs rapid translation layer: weeks vs days.
STEP 05 · METHOD
Tooling
Utilize Figma Code Connect, custom translation scripts, and linters for automated sync checks.
STEP 06 · LONG-TERM VALUE
Key Takeaway
Continuous sync prevents future naming drift, lowering developer overhead permanently. High ROI platform.
37–66 hrs
Full rename + Code Connect
13–23 hrs
Skip rename · Code Connect as bridge
40–60%
Accuracy with screenshot only
70–80%
Accuracy with design system docs
90%+
Accuracy with Figma MCP connected
When AI receives a Figma screen, it sees a visual snapshot, not component data. Without Code Connect, it cannot map a blue button to <Button variant="primary">. Code Connect encodes that translation once, making it machine-readable for every AI tool downstream.
Code Connect
Figma ↔ Vue officially linked. Dev Mode shows the correct code snippet for every component automatically.
Figma MCP
Claude Code reads Figma directly. AI generates the correct Vue component using real design data.
Vue DevTools
Requires one dev to provide dev-library access and confirm component names, design has no direct visibility into the codebase.
Screens shown are real production UI from Nostradamus ICT BV.